<!-- 入炉煤质 -->
<script setup lang="ts">
import { ref, reactive, onMounted, type VNode } from 'vue'
import { EditPen, Refresh } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox, ElLoading  } from 'element-plus'
import type { UploadProps, UploadUserFile, FormInstance, FormRules } from 'element-plus'
import { getToken } from '@/utils/auth'
import service from '@/utils/request'
import { useRouter } from 'vue-router'

const router = useRouter()

//table设置
const tableHeight = ref(0)
const listTableData = ref([])

const baseURL = service.defaults.baseURL;
console.log('baseURL---', baseURL); 

// 定义表格数据的类型
interface TableRow {
  id: number;
  time: string;
  name: string;
  name1: string;
}

// 保存选中项的 ID 列表
const selectedRowIds = ref<Set<number>>(new Set());

// 处理选中项变化的函数
const handleSelectionChange = (selection: TableRow[]) => {
  // 更新选中项 ID 列表
  selectedRowIds.value = new Set(selection.map((item) => item.id));
};

// 自定义行类名的函数
const rowClassName = ({ row }: { row: TableRow }): string => {
  return selectedRowIds.value.has(row.id) ? 'selected-row' : '';
};
const rowInfoClassName = (id:number) => {
    return selectedRowIds.value.has(id) ? 'selected_bg' : '';
}

//table样式自定义
const headerCellStyle = {
    padding:'16px 0'
}

const tableDialogVisible = ref(false)
function clickTableDialog(){
    tableDialogVisible.value = false
    ElMessage({
        message: '已修改，数据已更新',
        type: 'success',
    })
    //ElMessage.error('修改失败，请重新提交')
}

// 新增
const addDialogVisible = ref(false)

const formInline = reactive({
  name1: '',
  name2: '',
  name3: '',
  name4: '',
  name5: '',
  name6: '',
  name7: '',
  name8: '',
  name9: '',
})
// 修改
const editDialogVisible = ref(false)
const infoDialogVisible = ref(false)

const weightingVisible = ref(false)

const samplingVisible = ref(false)
const samplingForm = ref({
    time: '',
})
samplingForm.value.time = new Date().toISOString().split('T')[0];


// 上传
const headers = ref({
    Authorization: 'Bearer ' + getToken()
})
const fileList = ref<UploadUserFile[]>([])

// 限制上传文件类型和大小
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
    console.log('rawFile', rawFile)
    // if (rawFile.type !== 'doc/docx/xls/xlsx/txt/pdf') {
    //     ElMessage.error('请选择格式为doc/docx/xls/xlsx/txt/pdf的文件!')
    //     return false
    // } else 
    if (rawFile.size / 1024 / 1024 > 5) {
        ElMessage.error('文件大小不能超过 5MB!')
        return false
    }
    return true
}

const handleSuccess: UploadProps['onSuccess'] = (response, uploadFile) => {
    console.log('uploadFile-----',response.data.url)
    addForm.value.checkFileUrl = response.data.url
}

const handleExceed: UploadProps['onExceed'] = (files: File[], uploadFiles: UploadUserFile[]) => {
    ElMessage.error('只能添加一个文件，请先删除原有文件，在上传')
}

const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
    console.log('uploadFile----', uploadFile)
    console.log('uploadFiles----', uploadFiles)
    addForm.value.checkFileUrl = ''
}




import { FurnaceCoalQualityList, addFurnaceCoalQuality, delFurnaceCoalQuality, FurnaceCoalQualityInfo, AllFuelTypeList, DictDataType, EntryAndBunkerType, ClassInfo, CoalQualityProjectDataList,ClassInfoGroups,editFurnaceCoalQuality, FurnaceCoalQualitySampling } from "@/api";

// 入场编码-下拉框数据
const EntryData = ref<any>([])
const getEntryAndBunkerType = () => {
    EntryAndBunkerType().then(res=>{
        //console.log('字典----入场编码',res.data)
        EntryData.value = res.data
    })
}

// 煤炭种类-下拉框数据
const FuelTypeData = ref<any>([])
const getAllFuelTypeList = () => {
    AllFuelTypeList().then(res=>{
        //console.log('字典----煤炭种类',res.data)
        FuelTypeData.value = res.data
    })
}

// 班组-下拉框数据
// const classInfoData = ref<any>([])
// const cascaderOptions  = ref<any>([])
// const getDictDataType = () => {
//     DictDataType('class_info').then(res=>{
//         //console.log('字典----班组',res.data)
//         classInfoData.value = res.data
//         cascaderOptions.value = classInfoData.value.map((item:any) => ({
//             value: item.dictValue,
//             label: item.dictLabel,
//             leaf: false,
//         }))
//     })
// }
// 班组班次-下拉框数据
const classGradeData = ref<any>([])
const getClassInfoGroups = () => {
    ClassInfoGroups().then(res=>{
        //console.log('班组班次-------',res.data)
        classGradeData.value = res.data
        classGradeData.value = classGradeData.value.map((item:any) => ({
            classId: Number(item.classId),
            className: item.className,
            children: item.children
        }))
        //console.log('班组班次-------1',classGradeData.value)
    })
}
// 班组班次懒加载下拉框数据
// const cascaderProps: CascaderProps = {
//   lazy: true,
//   lazyLoad(node, resolve) {
//     const { level } = node
//     if(level == 0){
//         DictDataType('class_info').then(res=>{
//             //console.log('字典----班组',res.data)
//             const resData = ref<any>(res.data)
//             const nodes = resData.value.map((item:any) => ({
//                 value: item.dictValue,
//                 label: item.dictLabel,
//                 leaf: false,
//             }))
//             resolve(nodes)
//         })
//     } else if(level == 1){
//         //console.log(node.value)
//         ClassInfo(node.value).then(res=>{
//             //console.log('字典----班次',res.data)
//             const resData = ref<any>(res.data)
//             const nodes = resData.value.result.map((item:any) => ({
//                 value: item.classId,
//                 label: item.className,
//                 leaf: true,
//             }))
//             resolve(nodes)
//         })
//     }
//     // setTimeout(() => {
//     // //   const nodes = Array.from({ length: level + 1 }).map((item) => ({
//     // //     value: ++id,
//     // //     label: `Option - ${id}`,
//     // //     leaf: level >= 2,
//     // //   }))
//     //   // Invoke `resolve` callback to return the child nodes data and indicate the loading is finished.
//     //   resolve(nodes)
//     // }, 1000)
//   },
// }

// 自定义 CascaderProps
const cascaderProps = {
    value: 'classId',    // 指定选项的值字段
    label: 'className', // 指定选项的标签字段
    children: 'children', // 指定子级选项的字段
};

const changeCascader = (value:any) => {
    console.log('classId', value)
    addForm.value.classGroupId = Number(value[0])
    addForm.value.classId = value[1]
}

// 搜索
const searchForm = ref({
    sampleName: '',
    PageNum: 1, //当前页码
    PageSize: 10 //PageSize
})

const searchFormRef = ref<FormInstance>()
const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
    getFurnaceCoalQualityList()
}

const totalPage = ref(0)

//list
function getFurnaceCoalQualityList(){
    console.log(searchForm.value)
    FurnaceCoalQualityList(searchForm.value).then(res=>{
        //console.log('list-------',res.data)
        listTableData.value = res.data.result
        totalPage.value =  res.data.totalNum
    })
}

// add-form
const addForm = ref<any>({
    sampleName: '',
    entryNo: '',
    ftId: '',
    classGroupId:'',
    classId: '',
    amount:'',
    secondCode:'',

    getDate: '',
    checkDate: '',
    checkFileUrl: '',
    
    classGroups:[],

    coalQualityProjectData:[
        {
            projectName:'全水分',
            sarValue: null,
            kadValue: null,
            gdValue: null,
            gdafValue: null,
            symbol:'Mt',
            unit:'%'
        },
        {
            projectName:'空干基水分',
            sarValue: null,
            kadValue: null,
            gdValue: null,
            gdafValue: null,
            symbol:'Mad',
            unit:'%'
        },
        {
            projectName:'灰分',
            sarValue: null,
            kadValue: null,
            gdValue: null,
            gdafValue: null,
            symbol:'A',
            unit:'%'
        },
        {
            projectName:'挥发分',
            sarValue: null,
            kadValue: null,
            gdValue: null,
            gdafValue: null,
            symbol:'V',
            unit:'%'
        },
        {
            projectName:'固定碳',
            sarValue: null,
            kadValue: null,
            gdValue: null,
            gdafValue: null,
            symbol:'FC',
            unit:'%'
        },
        {
            projectName:'高位发热量',
            sarValue: null,
            kadValue: null,
            gdValue: null,
            gdafValue: null,
            symbol:'Qgr',
            unit:'MJ/kg'
        },
        {
            projectName:'低位发热量',
            sarValue: null,
            kadValue: null,
            gdValue: null,
            gdafValue: null,
            symbol:'Qnet',
            unit:'MJ/kg'
        },
        {
            projectName:'全硫',
            sarValue: null,
            kadValue: null,
            gdValue: null,
            gdafValue: null,
            symbol:'St',
            unit:'%'
        },
        {
            projectName:'元素分析',
            sarValue: null,
            kadValue: null,
            gdValue: null,
            gdafValue: null,
            symbol:'H',
            unit:'%'
        }
    ]
})

const rules = reactive<FormRules<any>>({
    sampleName: [
        { required: true, message: '请输入', trigger: 'blur' },
    ],
    entryNo: [
        {required: true, message: '请选择',trigger: 'change'},
    ],
    secondCode: [
        {required: true, message: '请选择',trigger: 'change'},
    ],
    amount: [
        { required: true, message: '请输入', trigger: 'blur' },
    ],
    classGroups: [
        { required: true, message: '请输入', trigger: 'change' },
    ],
    getDate: [
        {required: true, message: '请选择时间',trigger: 'change'},
    ],
    checkDate: [
        {required: true, message: '请选择时间',trigger: 'change'},
    ],
})

const secondCodes = ref([])

const changeEntryNo = (value: any) => {
    //console.log(value)
    //console.log(addForm.value)
    //let currentData = EntryData.value.filter((l: { entryNo: any; }) => l.entryNo === value).map((item: { ftId: any; ftName: any; }) => ({ ftId: item.ftId, ftName: item.ftName }))
    
    let currentData = EntryData.value.filter((item: { ftId: any; ftName: any;entryNo:any }) =>
        item.entryNo.includes(value) // 使用 includes 进行部分匹配
    );
    addForm.value.ftId = currentData[0].ftId
    secondCodes.value = currentData[0].secondCodes
    addForm.value.secondCode = ''
    //console.log('currentData-----', currentData)
}

// 验证提交表单
const ruleFormRef = ref<FormInstance>()
const submitForm = async (formEl: FormInstance | undefined) => {
    console.log('addForm.value-----', addForm.value)
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            if(isAddEdit.value == 0)
            {
                clickAddFurnaceCoalQuality()
            }
            else if(isAddEdit.value == 1){
                clickEditFurnaceCoalQuality()
            }

        } else {
            console.log('error submit!', fields)
        }
    })
}

// 重置清空表单
const resetAddForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}

const addDialog = () =>{
    resetAddForm(ruleFormRef.value)
    addForm.value.coalQualityProjectData = [
        {
            projectName:'全水分',
            sarValue: null,
            kadValue: null,
            gdValue: null,
            gdafValue: null,
            symbol:'Mt',
            unit:'%'
        },
        {
            projectName:'空干基水分',
            sarValue: null,
            kadValue: null,
            gdValue: null,
            gdafValue: null,
            symbol:'Mad',
            unit:'%'
        },
        {
            projectName:'灰分',
            sarValue: null,
            kadValue: null,
            gdValue: null,
            gdafValue: null,
            symbol:'A',
            unit:'%'
        },
        {
            projectName:'挥发分',
            sarValue: null,
            kadValue: null,
            gdValue: null,
            gdafValue: null,
            symbol:'V',
            unit:'%'
        },
        {
            projectName:'固定碳',
            sarValue: null,
            kadValue: null,
            gdValue: null,
            gdafValue: null,
            symbol:'FC',
            unit:'%'
        },
        {
            projectName:'高位发热量',
            sarValue: null,
            kadValue: null,
            gdValue: null,
            gdafValue: null,
            symbol:'Qgr',
            unit:'MJ/kg'
        },
        {
            projectName:'低位发热量',
            sarValue: null,
            kadValue: null,
            gdValue: null,
            gdafValue: null,
            symbol:'Qnet',
            unit:'MJ/kg'
        },
        {
            projectName:'全硫',
            sarValue: null,
            kadValue: null,
            gdValue: null,
            gdafValue: null,
            symbol:'St',
            unit:'%'
        },
        {
            projectName:'元素分析',
            sarValue: null,
            kadValue: null,
            gdValue: null,
            gdafValue: null,
            symbol:'H',
            unit:'%'
        }
    ]
    fileList.value = []
    addDialogVisible.value = true, 
    dialogTitle.value = '新增入炉煤质'
    isAddEdit.value = 0
}

//新增
const clickAddFurnaceCoalQuality = () => {
    console.log(addForm.value)
    addFurnaceCoalQuality(addForm.value).then(res=>{
        //console.log('新增----',res)
        if(res.code === 200){
            ElMessage({
                type: 'success',
                message: '添加成功',
            })
            addDialogVisible.value = false
            getFurnaceCoalQualityList()
        }
        else{
            ElMessage.error(res.msg)
        }
    })
}

// 删除
const clickDelete = (ids:string) => {
    ElMessageBox.confirm(
        '是否确定删除，删除后不能恢复?',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
        }
    )
    .then(() => {
        delFurnaceCoalQuality(ids).then(res=>{
            console.log('删除----',res)
            if(res.code === 200){
                ElMessage({
                    type: 'success',
                    message: '已成功删除',
                })
                getFurnaceCoalQualityList()
            }
            else{
                ElMessage.error('删除失败，请重新删除')
            }
        })
    })
}
//
// 详情 
let infoData = ref<any>({})
const groups = ref([])
const formattedData = ref([])
interface SubItem {
  groupName: string;
  value: number; // 假设 `value` 是一个数字，可以根据实际需求修改
}

function getFurnaceCoalQualityInfo(id:number){
    FurnaceCoalQualityInfo(id).then(res=>{
        //console.log('详情----',res.data)
        infoData.value = res.data
        if(infoData.value.checkDataAvailable)
        {
            formattedData.value = infoData.value.checkData.map((item:any) => {
                const data: Record<string, SubItem> = {}
                item.value.items.forEach((subItem:SubItem) => {
                    //console.log(subItem)
                    data[subItem.groupName] = subItem;
                });
                return {
                    projectName: item.value.project.projectName,
                    symbol: item.value.project.symbol,
                    unit: item.value.project.unit,
                    data
                };
            });
            groups.value = infoData.value.checkData[0].value.items.map((item:any) => item.groupName);
        }
        infoDialogVisible.value = true
    })
}

const dialogTitle = ref('') //新增入炉煤质
const isAddEdit = ref(0)  //0- 新增,1- 修改

// 修改 前获取详情
const editDialog = (id:number) => {
    const loading = ElLoading.service({
        lock: true,
        text: 'Loading',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    FurnaceCoalQualityInfo(id).then(res=>{
        //console.log('详情----',res.data)
        infoData.value = res.data
        
        addForm.value.id = infoData.value.id
        addForm.value.sampleName = infoData.value.sampleName;
        addForm.value.entryNo = infoData.value.entryNo;
        addForm.value.ftId = infoData.value.ftId;
        addForm.value.classGroupId = infoData.value.classGroupId;
        addForm.value.classId = infoData.value.classId;
        addForm.value.amount = infoData.value.amount;
        addForm.value.secondCode = infoData.value.secondCode;

        addForm.value.getDate = infoData.value.getDate;
        addForm.value.checkDate = infoData.value.checkDate;
        addForm.value.checkFileUrl = infoData.value.checkFileUrl;
        
        addForm.value.classGroups = [infoData.value.classGroupId,infoData.value.classId];

        fileList.value = []
        fileList.value.push({
            name: infoData.value.checkFileUrl.split('/').pop(),
            url: infoData.value.checkFileUrl,
        }) 

        CoalQualityProjectDataList(infoData.value.id,2).then(resa=>{
            //console.log('修改详情list----',resa.data)
            //projectData.value = res.data
            addForm.value.coalQualityProjectData = resa.data
            console.log('addForm.value----',addForm.value)
            loading.close()
            addDialogVisible.value = true
            dialogTitle.value = '修改入炉煤质'
            isAddEdit.value = 1
        })
    })
}

const clickEditFurnaceCoalQuality = () => {
    editFurnaceCoalQuality(addForm.value).then(res=>{
        console.log('修改----',res)
        if(res.code === 200){
            ElMessage({
                type: 'success',
                message: '修改成功',
            })
            addDialogVisible.value = false
            getFurnaceCoalQualityList()
        }
        else{
            ElMessage.error(res.msg)
        }
    })
}


// 入炉采样记录
const SamplingData = ref<any>({})
const SamplingAmountData = ref<any>({})
const getFurnaceCoalQualitySampling = () => {
    //samplingForm.value.time
    FurnaceCoalQualitySampling(samplingForm.value.time).then(res=>{
        console.log('入炉采样记录----',res.data)
        SamplingData.value = []
        const resData = ref<any>(res.data)
        for (let i = 0; i < resData.value.rowCount; i++) {
            console.log(i);
            const itemData = {
                samplingDate: resData.value.samplingDate,
                bai: resData.value.records[0]?.children[i],
                zhong: resData.value.records[1]?.children[i],
                ye: resData.value.records[2]?.children[i],
                totalAmount: resData.value.totalAmount
            }
            SamplingData.value.push(itemData)
        }
        SamplingAmountData.value = {
            baiAmount: resData.value.records[0]?.totalAmount,
            zhongAmount: resData.value.records[1]?.totalAmount,
            yeAmount: resData.value.records[2]?.totalAmount,
            recordsAvailable: resData.value.recordsAvailable
        }
        
        console.log('SamplingData.value----',SamplingData)
    })
}


const samplingDialog = () => {
    getFurnaceCoalQualitySampling()
    samplingVisible.value = true
}

// 批量删除
const batchDel = () => {
    if(selectedRowIds.value.size == 0){
        ElMessage.error('请先选择要批量删除的数据')
    }
    else{
        const loading = ElLoading.service({
            lock: true,
            text: 'Loading',
            background: 'rgba(0, 0, 0, 0.7)',
        })
        let ids: string = Array.from(selectedRowIds.value).join(', ');
        delFurnaceCoalQuality(ids).then(res=>{
            console.log('删除----',res)
            loading.close()
            if(res.code === 200){
                ElMessage({
                    type: 'success',
                    message: '已成功删除',
                })
                getFurnaceCoalQualityList()
            }
            else{
                ElMessage.error('删除失败，请重新删除')
            }
        })
    }
}


onMounted(() => {
    // 获取页面高度
    tableHeight.value = window.innerHeight - 310;
    getEntryAndBunkerType()
    //getAllFuelTypeList()
    getClassInfoGroups()
    getAllFuelTypeList()
    getFurnaceCoalQualityList()

    getFurnaceCoalQualitySampling()
});



</script>
<template>
    <!-- 弹出框/入炉采样记录 -->
    <el-dialog v-model="samplingVisible" :title="'入炉采样记录（生成日期：'+ samplingForm.time + ')'" width="1400" :align-center="true">
        <div class="dialog_main">
            <el-form :inline="true" :model="samplingForm" class="from_search_inline mt20" label-width="80">
                <el-form-item label="煤场名称:">
                    <el-date-picker
                        v-model="samplingForm.time"
                        type="date"
                        placeholder="请选择"
                        format="YYYY-MM-DD"
                        value-format="YYYY-MM-DD"
                        :clearable="false"
                    />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" color="#2565C8" @click="getFurnaceCoalQualitySampling">搜索</el-button>
                </el-form-item>
            </el-form>
            <!-- class="table_info small" -->
            <!-- <div >
                <el-table :data="SamplingData" header-cell-class-name="info_header_cell" style="width: 100%">
                    <el-table-column prop="samplingDate" label="日期" align="center" />

                    <el-table-column label="白" align="center">
                        <el-table-column prop="bai.className" label="班别" align="center" ></el-table-column>
                        <el-table-column prop="bai.coalName" label="煤种" align="center"></el-table-column>
                        <el-table-column prop="bai.amount" label="代表煤量(吨)" align="center"></el-table-column>
                    </el-table-column>
                    
                    <el-table-column label="中" align="center">
                        <el-table-column prop="zhong.className" label="班别" align="center"></el-table-column>
                        <el-table-column prop="zhong.coalName" label="煤种" align="center"></el-table-column>
                        <el-table-column prop="zhong.amount" label="代表煤量(吨)" align="center"></el-table-column>
                    </el-table-column>
                    <el-table-column label="夜" align="center">
                        <el-table-column prop="ye.className" label="班别" align="center"></el-table-column>
                        <el-table-column prop="ye.coalName" label="煤种" align="center"></el-table-column>
                        <el-table-column prop="ye.amount" label="代表煤量(吨)" align="center"></el-table-column>
                    </el-table-column>
                    <el-table-column prop="totalAmount" label="总数(吨)" align="center" />
                </el-table>
                <el-table :data="SamplingAmountData" :show-header="false" border style="width: 100%">
                    <el-table-column prop="totalAmount" align="center" ></el-table-column>
                    <el-table-column prop="baiAmount" align="center" />
                    <el-table-column prop="zhongAmount" align="center" />
                    <el-table-column prop="yeAmount" align="center" />
                </el-table>
            </div> -->
            <div class="table_info small">
                <table>
                    <tr>
                        <th rowspan="2">日期</th>
                        <th colspan="3">白</th>
                        <th colspan="3">中</th>
                        <th colspan="3">夜</th>
                        <th rowspan="2">总数(吨)</th>
                    </tr>
                    <tr>
                        <th>班别</th>
                        <th>煤种</th>
                        <th>代表煤量(吨)</th>
                        <th>班别</th>
                        <th>煤种</th>
                        <th>代表煤量(吨)</th>
                        <th>班别</th>
                        <th>煤种</th>
                        <th>代表煤量(吨)</th>
                    </tr>
                    <tr v-for="(item,index) in SamplingData">
                        <td v-if="index == 0" :rowspan="SamplingData.length">{{ item.samplingDate }}</td>
                        <td>{{ item.bai?.className }}</td>
                        <td>{{ item.bai?.coalName }}</td>
                        <td>{{ item.bai?.amount }}</td>
                        <td>{{ item.zhong?.className }}</td>
                        <td>{{ item.zhong?.coalName }}</td>
                        <td>{{ item.zhong?.amount }}</td>
                        <td>{{ item.ye?.className }}</td>
                        <td>{{ item.ye?.coalName }}</td>
                        <td>{{ item.ye?.amount }}</td>
                        <td class="table_bg" v-if="index == 0" :rowspan="SamplingData.length+1">{{ item.totalAmount }}</td>
                    </tr>
                    <tr class="table_bg" v-if="SamplingAmountData.recordsAvailable">
                        <td>上煤总量</td>
                        <td colspan="3">{{ SamplingAmountData.baiAmount }}</td>
                        <td colspan="3">{{ SamplingAmountData.zhongAmount }}</td>
                        <td colspan="3">{{ SamplingAmountData.yeAmount }}</td>
                    </tr>
                </table>
            </div>

        </div>
        <template #footer>
            <div class="dialog-footer-center" v-if="SamplingAmountData.recordsAvailable">
                <el-button type="primary" color="#2565C8" style="width: 130px;">
                    下载
                </el-button>
            </div>
        </template>
    </el-dialog>

    <!-- 弹出框/新增 -->
    <el-dialog v-model="addDialogVisible" :title="dialogTitle" width="900" :align-center="true">
        <div class="dialog_main">
            <el-form ref="ruleFormRef" :inline="true" :model="addForm" :rules="rules" class="mt15 form-inline-row-two" label-width="auto" >
                <el-form-item label="样品名称:" prop="sampleName">
                    <el-input v-model="addForm.sampleName" placeholder="请输入" style="width: 260px;" />
                </el-form-item>
                <el-form-item label="关联入场编号:" prop="entryNo">
                    <el-select v-model="addForm.entryNo" placeholder="请选择" style="width: 260px;" @change="changeEntryNo">
                        <el-option v-for="item in EntryData" :label="item.entryNo" :value="item.entryNo" />
                    </el-select>
                </el-form-item>
                <el-form-item label="煤种:" prop="ftId">
                    <el-select v-model="addForm.ftId" disabled placeholder="选择入场编号后自动产生" style="width: 260px;">
                        <el-option v-for="item in FuelTypeData" :label="item.ftName" :value="item.ftId" />
                    </el-select>
                </el-form-item>
                <el-form-item label="关联二次编码:" prop="secondCode">
                    <el-select v-model="addForm.secondCode" placeholder="请选择" style="width: 260px;" >
                        <el-option v-for="item in secondCodes" :label="item" :value="item" />
                    </el-select>
                </el-form-item>
                <el-form-item label="代表煤量:" prop="amount">
                    <el-input v-model="addForm.amount" placeholder="请输入" style="width: 260px;" />
                </el-form-item>
                <el-form-item label="所属班组:" prop="classGroups">
                    <!-- <el-select v-model="addForm.classId" placeholder="请选择" style="width: 260px;">
                        <el-option v-for="item in classInfoData" :label="item.dictLabel" :value="item.dictValue" />
                    </el-select> -->
                    <el-cascader v-model="addForm.classGroups" :options="classGradeData" :props="cascaderProps" :show-all-levels="false" @change="changeCascader" />
                </el-form-item>
                <el-form-item label="采样日期:" prop="getDate">
                    <el-date-picker
                        v-model="addForm.getDate"
                        type="date"
                        placeholder="请选择"
                        format="YYYY-MM-DD"
                        value-format="YYYY-MM-DD"
                        style="width: 260px;"
                    />
                </el-form-item>
                <el-form-item label="化验日期:" prop="checkDate">
                    <el-date-picker
                        v-model="addForm.checkDate"
                        type="date"
                        placeholder="请选择"
                        format="YYYY-MM-DD"
                        value-format="YYYY-MM-DD"
                        style="width: 260px;"
                    />
                </el-form-item>
            </el-form>
            <div class="form_title">相关煤质检测数据</div>

            <div class="table_info small">
                <table>
                    <colgroup>
                        <col width="14%">
                        <col width="15%">
                        <col width="15%">
                        <col width="15%">
                        <col width="15%">
                        <col width="12%">
                        <col width="12%">
                    </colgroup>
                    <tr>
                        <th>项目</th>
                        <th>收到基ar</th>
                        <th>空气干燥基ad</th>
                        <th>干基d</th>
                        <th>干燥无灰基daf</th>
                        <th>符号</th>
                        <th>单位</th>
                    </tr>
                    <tr v-for="item in addForm.coalQualityProjectData">
                        <th>{{ item.projectName }}</th>
                        <td>
                            <el-input v-model="item.sarValue" type="number" step="0.01"></el-input>
                        </td>
                        <td>
                            <el-input v-model="item.kadValue" type="number" step="0.01"></el-input>
                        </td>
                        <td>
                            <el-input v-model="item.gdValue" type="number" step="0.01"></el-input>
                        </td>
                        <td>
                            <el-input v-model="item.gdafValue" type="number" step="0.01"></el-input>
                        </td>
                        <td>{{ item.symbol }}</td>
                        <td>{{ item.unit }}</td>
                    </tr>
                    
                </table>
            </div>
            
            <!-- 上传检测报告 -->
            <div class="upload_report">
                <div class="title">上传检测报告</div>
                <!-- <a href="#" class="blue">上传检测报告</a> -->
                <el-upload
                    v-model:file-list="fileList"
                    class="upload-demo"
                    :action="baseURL+'/Common/UploadFile'"
                    :headers="headers"
                    :limit="1"
                    accept=".doc,.docx,.pdf,.xls,.xlsx,.ppt,.pptx,.txt"
                    :on-success="handleSuccess"
                    :before-upload="beforeAvatarUpload"
                    :on-exceed="handleExceed"
                    :on-remove="handleRemove"
                >
                    <el-button type="primary">选取文件</el-button>
                    <template #tip>
                        <div class="el-upload__tip">
                            请上传大小不超过 <span class="red">5MB</span> 格式为 <span class="red">doc/docx/xls/xlsx/txt/pdf</span> 的文件
                        </div>
                    </template>
                </el-upload>
            </div>

        </div>
        <template #footer>
            <div class="dialog-footer-center">
                <el-button type="primary" color="#2565C8" style="width: 130px;" @click="submitForm(ruleFormRef)">
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog>

    <!-- 弹出框/修改 -->
    <el-dialog v-model="editDialogVisible" title="修改入炉煤质" width="900" :align-center="true">
        <div class="dialog_main">
            <el-form :inline="true" :model="formInline" class="mt15 form-inline-row-two" label-width="100" >
                <el-form-item label="样品名称:">
                    <el-input v-model="formInline.name1" placeholder="请输入" style="width: 260px;" />
                </el-form-item>
                <el-form-item label="关联入场编号:">
                    <el-select v-model="formInline.name2" placeholder="请选择" style="width: 260px;">
                        <el-option label="编号11" value="11" />
                        <el-option label="编号22" value="22" />
                    </el-select>
                </el-form-item>
                <el-form-item label="煤种:">
                    <el-input v-model="formInline.name3" disabled placeholder="选择入场编号后自动产生"style="width: 260px;" />
                </el-form-item>
                <el-form-item label="班别:">
                    <el-select v-model="formInline.name4" placeholder="请选择" style="width: 260px;">
                        <el-option label="班别11" value="11" />
                        <el-option label="班别22" value="22" />
                    </el-select>
                </el-form-item>
                <el-form-item label="代表煤量:">
                    <el-input v-model="formInline.name5" placeholder="请输入" style="width: 260px;" />
                </el-form-item>
                <el-form-item label="采样日期:">
                    <el-date-picker
                        v-model="formInline.name6"
                        type="date"
                        placeholder="请选择"
                        style="width: 260px;"
                    />
                </el-form-item>
                <el-form-item label="化验日期:">
                    <el-date-picker
                        v-model="formInline.name7"
                        type="date"
                        placeholder="请选择"
                        style="width: 260px;"
                    />
                </el-form-item>

            </el-form>
            <div class="form_title">相关煤质检测数据</div>
            <div class="table_info small">
                <table>
                    <colgroup>
                        <col width="14%">
                        <col width="15%">
                        <col width="15%">
                        <col width="15%">
                        <col width="15%">
                        <col width="12%">
                        <col width="12%">
                    </colgroup>
                    <tr>
                        <th>项目</th>
                        <th>收到基ar</th>
                        <th>空气干燥基ad</th>
                        <th>干基d</th>
                        <th>干燥无灰基daf</th>
                        <th>符号</th>
                        <th>单位</th>
                    </tr>
                    <tr>
                        <th>全水分</th>
                        <td><el-input /></td>
                        <td><el-input /></td>
                        <td><el-input /></td>
                        <td><el-input /></td>
                        <td>Mt</td>
                        <td>%</td>
                    </tr>
                    <tr>
                        <th>空干基水分</th>
                        <td><el-input /></td>
                        <td><el-input /></td>
                        <td><el-input /></td>
                        <td><el-input /></td>
                        <td>Mt</td>
                        <td>%</td>
                    </tr>
                    <tr>
                        <th>灰分</th>
                        <td><el-input /></td>
                        <td><el-input /></td>
                        <td><el-input /></td>
                        <td><el-input /></td>
                        <td>Mt</td>
                        <td>%</td>
                    </tr>
                    <tr>
                        <th>挥发分</th>
                        <td><el-input /></td>
                        <td><el-input /></td>
                        <td><el-input /></td>
                        <td><el-input /></td>
                        <td>Mt</td>
                        <td>%</td>
                    </tr>
                    <tr>
                        <th>固定碳</th>
                        <td><el-input /></td>
                        <td><el-input /></td>
                        <td><el-input /></td>
                        <td><el-input /></td>
                        <td>Mt</td>
                        <td>%</td>
                    </tr>
                    <tr>
                        <th>高位发热量</th>
                        <td><el-input /></td>
                        <td><el-input /></td>
                        <td><el-input /></td>
                        <td><el-input /></td>
                        <td>Mt</td>
                        <td>%</td>
                    </tr>
                    <tr>
                        <th>低位发热量</th>
                        <td><el-input /></td>
                        <td><el-input /></td>
                        <td><el-input /></td>
                        <td><el-input /></td>
                        <td>Mt</td>
                        <td>%</td>
                    </tr>
                    <tr>
                        <th>全硫</th>
                        <td><el-input /></td>
                        <td><el-input /></td>
                        <td><el-input /></td>
                        <td><el-input /></td>
                        <td>Mt</td>
                        <td>%</td>
                    </tr>
                    <tr>
                        <th>元素分析</th>
                        <td><el-input /></td>
                        <td><el-input /></td>
                        <td><el-input /></td>
                        <td><el-input /></td>
                        <td>Mt</td>
                        <td>%</td>
                    </tr>
                </table>
            </div>
            
            <!-- 上传检测报告 -->
            <div class="upload_report">
                <div class="name">上传煤质检测报告</div>
                <p>
                    <img src="../../assets/img/3.jpg" width="130" alt="">
                    <a href="#" class="blue">预览检测报告</a>
                    <a href="#" class="blue">更新检测报告</a>
                </p>
            </div>

        </div>
        <template #footer>
            <div class="dialog-footer-center">
                <el-button type="primary" color="#2565C8" style="width: 130px;">
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog>

    <!-- 弹出框/详情 -->
    <el-dialog v-model="infoDialogVisible" title="入炉煤质详情" width="1400" :align-center="true">
        <div class="dialog_main">
            <ul class="edit_info mt15">
                <li>
                    <span>样品名称:</span>
                    <p>{{ infoData.sampleName }}</p>
                </li>
                <li>
                    <span>关联入场编号:</span>
                    <p>{{ infoData.entryNo }}</p>
                </li>
                <li>
                    <span>代表煤种:</span>
                    <p>{{ infoData.coalName }}
                        <!-- <span v-for="item in FuelTypeData">
                            <span v-if="infoData.ftId == item.ftId">{{ item.ftName }}</span>
                        </span> -->
                    </p>
                </li>
                <li>
                    <span>二次编码:</span>
                    <p>{{ infoData.secondCode }}</p>
                </li>
                <li>
                    <span>班组:</span>
                    <p>{{ infoData.classInfo }}</p>
                </li>
                <li>
                    <span>代表煤量:</span>
                    <p>{{ infoData.amount }}</p>
                </li>
                <li>
                    <span>采样日期:</span>
                    <p>{{ infoData.getDate }}</p>
                </li>
                <li>
                    <span>化验日期:</span>
                    <p>{{ infoData.checkDate }}</p>
                </li>
            </ul>
            
            <div v-if="infoData.checkDataAvailable" class="form_title" >相关煤质检测数据</div>
            <div v-if="infoData.checkDataAvailable" >
                <!-- <table class="table_info">
                    <tr v-for="item in infoData.checkData">
                        <td>
                            {{ item.key }}
                        </td>
                        <td v-for="itema in item.value.items">
                            <table>
                                <tr>
                                    <td>{{ itema.factoryValue }}</td>
                                    <td>{{ itema.furnaceValue }}</td>
                                    <td>{{ itema.offsetString }}</td>
                                </tr>
                            </table>
                        </td>
                        <td>{{ item.value.project.symbol }}</td>
                        <td>{{ item.value.project.unit }}</td>
                    </tr>
                </table> -->

                <el-table :data="formattedData" header-cell-class-name="info_header_cell" style="width: 100%">
                    <el-table-column prop="projectName" label="项目" align="center" class-name="info_name" />
                    <el-table-column v-for="group in groups" :key="group" :label="group" align="center">
                        <el-table-column :prop="`data.${group}.furnaceValue`" label="入炉检测" align="center">
                        </el-table-column>
                        <el-table-column :prop="`data.${group}.factoryValue`" label="入厂检测" align="center">
                        </el-table-column>
                        <el-table-column :prop="`data.${group}.offsetString`" label="偏差" align="center">
                        </el-table-column>
                    </el-table-column>
                    <el-table-column prop="symbol" label="符号" align="center" />
                    <el-table-column prop="unit" label="单位" align="center" />
                </el-table>

            </div>

            <!-- 上传检测报告 -->
            <div class="upload_report" v-if="infoData.reportAvailable">
                <div class="name">相关煤质检测报告</div>
                <p>
                    <!-- <img src="../../assets/img/3.jpg" width="130" alt="">
                    <a :href="infoData.checkFileUrl" class="blue">预览检测报告</a> -->
                    <a :href="infoData.checkFileUrl" target="_blank" class="blue">下载检测报告</a>
                </p>
            </div>

        </div>
    </el-dialog>

    <!-- 弹出框/加权明细 -->
    <el-dialog v-model="weightingVisible" title="加权明细" width="1500" :align-center="true">
        <div class="dialog_main">
            <div class="forecast_title">
                入厂煤分析加权值计算表
            </div>
            <el-form :inline="true">
                <el-form-item label="煤源:">
                    哥伦比压煤
                </el-form-item>
                <el-form-item label="船名:">
                    潘塔
                </el-form-item>
                <el-form-item label="一次编码:">
                    32648
                </el-form-item>
                <el-form-item label="总卸煤量:">
                    17013(t)
                </el-form-item>
            </el-form>
            <div class="table_info small">
                <table>
                    <tr>
                        <th>序号</th>
                        <th>二次编码</th>
                        <th>化验日期</th>
                        <th>代表煤量(t)</th>
                        <th>空干基水分</th>
                        <th>空干基挥发份</th>
                        <th>空干基灰分</th>
                        <th>空干基全硫</th>
                        <th>空干基氢</th>
                        <th>空干基高位发热量</th>
                        <th>干基高位发热量</th>
                        <th>收到基低位发热量</th>
                        <th>全水</th>
                    </tr>
                    <tr v-for="(item,index) in 9">
                        <th>{{ index+1 }}</th>
                        <td>20230610818</td>
                        <td>2023-06-10</td>
                        <td>27845</td>
                        <td>35.9</td>
                        <td>5.98</td>
                        <td>35.98</td>
                        <td>4.98</td>
                        <td>35.98</td>
                        <td>5.98</td>
                        <td>35.9</td>
                        <td>35.98</td>
                        <td>3.98</td>
                    </tr>
                </table>
               
            </div>
            <!-- 上传检测报告 -->
            <div class="upload_report">
                <div class="name">相关煤质检测报告</div>
                <p>
                    <img src="../../assets/img/3.jpg" width="130" alt="">
                    <a href="#" class="blue">预览检测报告</a>
                    <a href="#" class="blue">下载检测报告</a>
                </p>
            </div>
        </div>
        <template #footer>
            <div class="dialog-footer-center">
                <el-button type="primary" color="#2565C8" style="width: 130px;">
                    下载
                </el-button>
            </div>
        </template>
    </el-dialog>

    <!-- 弹出框 -->
    <el-dialog v-model="tableDialogVisible" width="400" :align-center="true" center>
        <div class="table_dialog">
            <img src="../../assets/img/ico_5.png" alt="">
            <strong>您确定要保存修改内容吗？</strong>
            <span>
                修改内容保存后不可撤回，且会覆盖之前数据
            </span>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="tableDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="clickTableDialog">
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog>

    <!-- search -->
    <div class="search_bor_bg">
        <el-form ref="searchFormRef" :inline="true" :model="searchForm" class="from_search_inline"  >
            <el-form-item label="样品名称:" prop="sampleName">
                <el-input v-model="searchForm.sampleName" placeholder="请输入" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" color="#2565C8" @click="getFurnaceCoalQualityList">搜索</el-button>
                <el-button style="padding:0 8px;" @click="resetForm(searchFormRef)">
                    <el-icon size="20">
                        <Refresh />
                    </el-icon>
                </el-button>
            </el-form-item>
        </el-form>
    </div>

    <div class="box_bg mt15">
        <div class="record_set">
            <el-button type="primary" color="#2565C8" @click="addDialog">新增</el-button>
            <el-button type="primary" color="#2565C8" @click="batchDel">批量删除</el-button>
            <el-button type="primary" color="#2565C8" @click="router.push('/furnace/quality/export')">导出入炉煤质</el-button>
            <el-button type="primary" color="#2565C8" @click="samplingDialog">入炉煤采样统计</el-button>
        </div>
        <div class="table_list mt15">
            <el-table class="custom-table" 
                :data="listTableData" 
                size="large" 
                :border="false" 
                :stripe="false" 
                :highlight-current-row="false"
                :height="tableHeight"
                :header-cell-style="headerCellStyle"
                style="width: 100%;" 
                :row-class-name="rowClassName"
                ref="multipleTableRef"
                @selection-change="handleSelectionChange">
                
                <el-table-column type="selection" width="50" align="right" />
                <el-table-column type="expand">
                    <template #default="props">
                        <!-- props.row -->
                        <div  v-if="props.row.expandable" class="table_list_info" :class="rowInfoClassName(props.row.id)">
                            <div class="table_info">
                                <table>
                                    <tr>
                                        <th>干基高位发热量</th>
                                        <th>收到基低位发热量</th>
                                        <th>空干基水分</th>
                                        <th>空干基挥发份</th>
                                        <th>空干基全硫</th>
                                        <th>空干基氢</th>
                                        <th>全水</th>
                                    </tr>
                                    <tr>
                                        <td>{{ props.row.expanded.gdHighHeat }}</td>
                                        <td>{{ props.row.expanded.qnetArMj }}</td>
                                        <td>{{ props.row.expanded.qgrAd }}</td>
                                        <td>{{ props.row.expanded.qdAd }}</td>
                                        <td>{{ props.row.expanded.aad }}</td>
                                        <td>{{ props.row.expanded.had }}</td>
                                        <td>{{ props.row.expanded.qbAd }}</td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="班别" prop="classInfo" />
                <el-table-column label="样品名称" prop="sampleName" />
                <el-table-column label="煤种" prop="ftId" >
                    <template #default="props">
                        <span v-for="item in FuelTypeData">
                            <span v-if="props.row.ftId == item.ftId">{{ item.ftName }}</span>
                        </span>
                    </template>
                </el-table-column>
                <el-table-column label="代表煤量" prop="amount" />
                <el-table-column label="入厂编码" prop="entryNo" />
                <el-table-column label="采样日期" prop="getDate" />
                <el-table-column label="化验日期" prop="checkDate" />
                <el-table-column label="空干基高位发热量" prop="stAr" align="center" />
                <el-table-column align="center" label="操作" min-width="180">
                    <template #default="scope">
                        <div class="table_btn">
                            <a href="javascript:;" @click="clickDelete(scope.row.id)">删除</a>|
                            <a href="javascript:;" @click="editDialog(scope.row.id)">修改</a>
                            <!-- <a href="javascript:;" @click="getFurnaceCoalQualityInfo(scope.row.id)">查看</a>|
                            <a href="javascript:;" @click="getFurnaceCoalQualityInfo(scope.row.entryNo)">导出</a> -->
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="pagination">
            <el-pagination v-model:current-page="searchForm.PageNum" v-model:page-size="searchForm.PageSize" @current-change="getFurnaceCoalQualityList" :total="totalPage"  background layout="prev, pager, next" />
        </div>
    </div>

</template>
<style>
.info_header_cell{
    background: #CCDDF9 !important;
    color:#3D4755;
    font-weight: normal!important;
}
.info_name{
    background: #CCDDF9 !important;
    color:#3D4755;
}
</style>
<style scoped lang="scss">
.upload_report{
    display: flex;
    .title{
        flex-shrink: 0;
        width: 14%;
        text-align: center;
        line-height: 32px;
    }
}



.table_list ::v-deep(.el-table__body-wrapper){
    background: #F6FAFE !important;
}
.table_list ::v-deep(.el-table__inner-wrapper:before){
    display: none; //下边线
}
.table_list ::v-deep(.el-table thead th) {
  color: #333 !important;
  background: #CCDDF9;
}
.table_list ::v-deep(.el-table__body){
    border-spacing: 0px 13px !important;
}
.table_list ::v-deep(.el-table__row td){
    border-top:1px solid #E0E5ED !important;
    border-bottom:1px solid #E0E5ED !important;
}
.table_list ::v-deep(.el-table__row td:first-child){
    border-left:1px solid #E0E5ED !important;
}
.table_list ::v-deep(.el-table__row td:last-child){
    border-right:1px solid #E0E5ED !important;
}
.table_list ::v-deep(.el-table__row:hover td){
    background: #ecf5ff!important;
}
.table_list ::v-deep(.el-table__expanded-cell){
    border:1px solid #E0E5ED !important;
    padding:0 !important;
    //border-top: none !important; 
}
// ::v-deep(.el-table__expanded-cell td){
//     background: #ecf5ff!important;
// }
.table_list ::v-deep(.el-table__expanded-cell:hover) {
  background-color: #ecf5ff !important;
}
.table_list ::v-deep(.el-table__row.selected-row td){
    background: #FFDE9A !important;
}
</style>